<template>
  <el-checkbox-group
    v-bind="attrs"
    :model-value="modelValue"
    @change="handleChange"
  >
    <component
      :is="componentName"
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-checkbox-group>
</template>

<script setup>
import { ElCheckboxButton, ElCheckbox } from 'element-plus'

const modelValue = defineModel({
  type: Array,
  default: [],
})
const emit = defineEmits(['change'])
defineProps({
  options: {
    type: Array,
    default: () => [],
  },
})

const attrs = useAttrs()

const componentMap = {
  checkbox: ElCheckbox,
  'checkbox-button': ElCheckboxButton,
}

const componentName = computed(
  () => componentMap[attrs?.component] || ElCheckbox,
)
console.log(componentName.value)

function handleChange(value) {
  modelValue.value = value
  emit('change', value)
}
</script>
